<template>
  <section>
    <el-form v-if="form" label-width="60px" size="mini">
      <el-form-item label="类型">
        <el-radio-group v-model="form.type">
          <el-radio label="normal">普通</el-radio>
          <el-radio label="editable">可编辑</el-radio>
          <el-radio label="img">图片</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选项：">
        <div v-if="form.type === 'img'" style="display: flex;flex-direction: column">
          <div style="display: flex;flex-direction: row">
            <el-button size="mini" type="success" @click="selImgOptionsBtn(form)">选择图片</el-button>
            <!--<el-input v-model="addForm.text" style="width: 200px;margin-left: 20px" aria-pl></el-input>-->
          </div>
          <div v-if="/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(form.text) ">
            <img :src="form.text" width="50px" height="50px">
          </div>
          <div v-else>
            请选择图片
          </div>
        </div>
        <el-input v-else v-model="form.text"></el-input>
      </el-form-item>
      <el-form-item label="策略：" v-if="tacticsIndexes">
        <el-col :span="8">
          <el-cascader :options="tacticsIndexes" v-model="selTacticsIndex" :props="defaultProps" :change-on-select="true" :show-all-levels="false">
          </el-cascader>
        </el-col>
        <el-col :span="2" style="margin-left: 30px">
          分数：
        </el-col>
        <el-col :span="4" style="margin-left: 0px">
          <el-input v-model="tacticsPoint"></el-input>
        </el-col>
      </el-form-item>
      <section v-if="form.type === 'editable' || form.type === 'img'">
        <el-form-item label="提示：">
          <el-input v-model="form.placeholder"></el-input>
        </el-form-item>
      </section>
      <el-form-item>
        <el-button type="primary" @click="confirmBtn">提交</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="选择图片" :visible.sync="showSelImgDialog" v-if="form" append-to-body>
      <choice-box :show-dialog="showSelImgDialog" @cancel="showSelImgDialog=false" @success="fileCallback"></choice-box>
    </el-dialog>
  </section>
</template>

<script>
  import choiceBox from '@/components/fileManager/subs/choiceBox'
  export default {
    name: "eidtOptions",
    props:['form','tacticsIndexes'],
    components:{choiceBox},
    data(){
      return{
        showSelImgDialog:false,
        defaultProps:{
          children: 'childrens',
          label: 'name',
          value:'id'},
        selTacticsIndex:null,
        tacticsPoint:null
      }
    },
    watch:{
      selTacticsIndex(nv,ov){
        console.log('nv',nv)
        if(nv){
          // 保存下 path ，回显用
          this.form.tacticsIndexPath = nv;
          this.form.tacticsIndexes = [nv[nv.length-1]] // 区 nv 最后一个元素
        }
      },
      tacticsPoint(nv,ov){
        if(nv!==null){
          if(nv !== '')
            this.form.points = [parseFloat(nv)] // 组装成数组 ，向后兼容
          else
            this.form.points = null
        }
      }
    },
    created(){
      console.log('看下选项编辑------------',this.from)
      if(this.form){
        if(this.form.tacticsIndexPath)
          this.selTacticsIndex = this.form.tacticsIndexPath // 回显示
        else
          this.selTacticsIndex = []
        if(this.form.points && this.form.points.length>0)
          this.tacticsPoint = this.form.points[0]
        else
          this.tacticsPoint = ''
      }
    },
    methods:{
      selImgOptionsBtn(addForm){
        console.log('看下这是什么---------',addForm)
        this.showSelImgDialog=true
      },
      fileCallback(files){
        console.log('看看选中了什么-------',files)
        files.forEach(f=>{
          this.form.text = f.uri
        })
        this.showSelImgDialog = false
      },
      confirmBtn(){
        console.log('选好了，保存------',this.form)
        this.$emit('confirm',this.form)
      }
    }
  }
</script>

<style scoped>

</style>
